﻿@page "/components/persona"

<PageOutlet Url="components/persona"
            Title="Persona"
            Description="persona component of the bit BlazorUI components" />

<DemoPage Name="Persona"
          SecondaryNames="@(["Avatar"])"
          Description="A BitPersona is a visual representation of a person across products, typically showcasing the image that person has chosen to upload themselves. The control can also be used to show that person's online status. The complete control includes an individual's avatar (an uploaded image or a composition of the person’s initials on a background color), their name or identification, and online status. The BitPersona control is used in the PeoplePicker and Facepile controls."
          Parameters="componentParameters"
          SubEnums="componentSubEnums"
          SubClasses="componentSubClasses"
          GitHubUrl="Notifications/Persona/BitPersona.razor"
          GitHubDemoUrl="Notifications/Persona/BitPersonaDemo.razor">
    <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
        <BitPersona PrimaryText="Saleh Khafan"
                    Size="BitPersonaSize.Size72" />
        <br /><br />
        <BitPersona PrimaryText="Annie Lindqvist"
                    Size="BitPersonaSize.Size72"
                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
        <br /><br />
        <BitPersona PrimaryText="Unknown"
                    SecondaryText="Developer"
                    Size="BitPersonaSize.Size72"
                    Unknown />
    </DemoExample>

    <DemoExample Title="Size" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
        <BitCheckbox @bind-Value="isDetailsShown" Label="Include BitPersona details" />
        <br /><br /><br /><br />
        <div>Size 8 Persona:</div><br />
        <BitPersona PrimaryText="Annie Lindqvist"
                    SecondaryText="Secondary"
                    Size="BitPersonaSize.Size8"
                    HidePersonaDetails="!isDetailsShown"
                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
        <br /><br /><br /><br />
        <div>Size 24 Persona:</div><br />
        <BitPersona PrimaryText="Annie Lindqvist"
                    SecondaryText="Secondary"
                    Size="BitPersonaSize.Size24"
                    HidePersonaDetails="!isDetailsShown"
                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
        <br /><br /><br /><br />
        <div>Size 32 Persona:</div><br />
        <BitPersona PrimaryText="Annie Lindqvist"
                    SecondaryText="Secondary"
                    Size=@BitPersonaSize.Size32
                    HidePersonaDetails="!isDetailsShown"
                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
        <br /><br /><br /><br />
        <div>Size 40 Persona:</div><br />
        <BitPersona PrimaryText="Annie Lindqvist"
                    SecondaryText="Software Engineer"
                    Size="BitPersonaSize.Size40"
                    HidePersonaDetails="!isDetailsShown"
                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
        <br /><br /><br /><br />
        <div>Size 48 Persona:</div><br />
        <BitPersona PrimaryText="Annie Lindqvist"
                    SecondaryText="Software Engineer"
                    Size="BitPersonaSize.Size48"
                    HidePersonaDetails="!isDetailsShown"
                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
        <br /><br /><br /><br />
        <div>Size 56 Persona:</div><br />
        <BitPersona PrimaryText="Annie Lindqvist"
                    SecondaryText="Software Engineer"
                    Size="BitPersonaSize.Size56"
                    HidePersonaDetails="!isDetailsShown"
                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
        <br /><br /><br /><br />
        <div>Size 72 Persona:</div><br />
        <BitPersona PrimaryText="Annie Lindqvist"
                    SecondaryText="Software Engineer"
                    TertiaryText="In a meeting"
                    Size="BitPersonaSize.Size72"
                    HidePersonaDetails="!isDetailsShown"
                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
        <br /><br /><br /><br />
        <div>Size 100 Persona:</div><br />
        <BitPersona PrimaryText="Annie Lindqvist"
                    SecondaryText="Software Engineer"
                    TertiaryText="Off"
                    OptionalText="Available at 4:00pm"
                    Size="BitPersonaSize.Size100"
                    HidePersonaDetails="!isDetailsShown"
                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
        <br /><br /><br /><br />
        <div>Size 120 Persona:</div><br />
        <BitPersona PrimaryText="Annie Lindqvist"
                    SecondaryText="Software Engineer"
                    TertiaryText="In a meeting"
                    OptionalText="Available at 4:00pm"
                    Size="BitPersonaSize.Size120"
                    HidePersonaDetails="!isDetailsShown"
                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
        <br /><br /><br /><br />
        <div>CoinSize 150:</div><br />
        <BitPersona CoinSize="150"
                    PrimaryText="Annie Lindqvist"
                    SecondaryText="Software Engineer"
                    TertiaryText="In a meeting"
                    OptionalText="Available at 4:00pm"
                    Size="BitPersonaSize.Size120"
                    HidePersonaDetails="!isDetailsShown"
                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
    </DemoExample>

    <DemoExample Title="Variant" RazorCode="@example3RazorCode" Id="example3">
        <BitPersona PrimaryText="Saleh Xafan"
                    SecondaryText="Developer"
                    Size="BitPersonaSize.Size72"
                    CoinVariant="BitVariant.Fill" />
        <br /><br />
        <BitPersona PrimaryText="Saleh Xafan"
                    SecondaryText="Developer"
                    Size="BitPersonaSize.Size72"
                    CoinVariant="BitVariant.Outline" />
        <br /><br />
        <BitPersona PrimaryText="Saleh Xafan"
                    SecondaryText="Developer"
                    Size="BitPersonaSize.Size72"
                    CoinVariant="BitVariant.Text" />
    </DemoExample>

    <DemoExample Title="Shape" RazorCode="@example4RazorCode" Id="example4">
        <BitPersona PrimaryText="Saleh Xafan"
                    SecondaryText="Developer"
                    Size="BitPersonaSize.Size72"
                    CoinShape="BitPersonaCoinShape.Circular"
                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
        <br /><br />
        <BitPersona PrimaryText="Saleh Xafan"
                    SecondaryText="Developer"
                    Size="BitPersonaSize.Size72"
                    CoinShape="BitPersonaCoinShape.Square"
                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
    </DemoExample>

    <DemoExample Title="Action" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
        <div>Custom action can be revealed by hovering on the bottom of the image:</div><br />
        <BitPersona PrimaryText="Annie Lindqvist"
                    SecondaryText="Software Engineer"
                    TertiaryText="In a meeting"
                    OptionalText="Available at 4:00pm"
                    Size="BitPersonaSize.Size120"
                    Presence="BitPersonaPresence.None"
                    OnActionClick="() => actionClickCount++"
                    ActionIconName="@BitIconName.CloudUpload"
                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
        <p>Action Click Count: @actionClickCount</p>
        <br /><br /><br /><br />
        <div>Hover over the image to reveal the image click action:</div><br />
        <BitPersona PrimaryText="Annie Lindqvist"
                    SecondaryText="Software Engineer"
                    TertiaryText="In a meeting"
                    OptionalText="Available at 4:00pm"
                    Size="BitPersonaSize.Size120"
                    Presence="BitPersonaPresence.Online"
                    OnImageClick="() => imageClickCount++"
                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
        <p>Image Click Count: @imageClickCount</p>
    </DemoExample>

    <DemoExample Title="Initials" RazorCode="@example6RazorCode" Id="example6">
        <div>Invalid ImageUrl:</div><br />
        <BitPersona PrimaryText="Saleh Khafan"
                    Size="BitPersonaSize.Size72"
                    ShowInitialsUntilImageLoads
                    ImageUrl="invalid-src" />
        <br /><br /><br /><br />
        <div>No ImageUrl:</div><br />
        <BitPersona Size="BitPersonaSize.Size72" PrimaryText="Saleh Xafan" />
        <br /><br /><br /><br />
        <div>ImageInitials:</div><br />
        <BitPersona Size="BitPersonaSize.Size72" PrimaryText="Saleh Khafan" ImageInitials="S" />
    </DemoExample>

    <DemoExample Title="PersonaPresence" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
        <div>None:</div><br />
        <BitPersona PrimaryText="Annie Lindqvist"
                    SecondaryText="Software Engineer"
                    Presence="BitPersonaPresence.None"
                    PresenceIcons="_icons"
                    Size="BitPersonaSize.Size120"
                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
        <br /><br /><br /><br />
        <div>Offline:</div><br />
        <BitPersona PrimaryText="Annie Lindqvist"
                    SecondaryText="Software Engineer"
                    Presence="BitPersonaPresence.Offline"
                    PresenceIcons="_icons"
                    Size="BitPersonaSize.Size120"
                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
        <br /><br /><br /><br />
        <div>Online:</div><br />
        <BitPersona PrimaryText="Annie Lindqvist"
                    SecondaryText="Software Engineer"
                    Presence="BitPersonaPresence.Online"
                    PresenceIcons="_icons"
                    Size="BitPersonaSize.Size120"
                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
        <br /><br /><br /><br />
        <div>Away:</div><br />
        <BitPersona PrimaryText="Annie Lindqvist"
                    SecondaryText="Software Engineer"
                    Presence="BitPersonaPresence.Away"
                    PresenceIcons="_icons"
                    Size="BitPersonaSize.Size120"
                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
        <br /><br /><br /><br />
        <div>Do not Disturb (Dnd):</div><br />
        <BitPersona PrimaryText="Annie Lindqvist"
                    SecondaryText="Software Engineer"
                    Presence="BitPersonaPresence.Dnd"
                    PresenceIcons="_icons"
                    Size="BitPersonaSize.Size120"
                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
        <br /><br /><br /><br />
        <div>Blocked:</div><br />
        <BitPersona PrimaryText="Annie Lindqvist"
                    SecondaryText="Software Engineer"
                    Presence="BitPersonaPresence.Blocked"
                    Size="BitPersonaSize.Size120"
                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
        <br /><br /><br /><br />
        <div>Busy:</div><br />
        <BitPersona PrimaryText="Annie Lindqvist"
                    SecondaryText="Software Engineer"
                    Presence="BitPersonaPresence.Busy"
                    PresenceIcons="_icons"
                    Size="BitPersonaSize.Size120"
                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
    </DemoExample>

    <DemoExample Title="Reversed" RazorCode="@example8RazorCode" Id="example8">
        <div>Adjust the texts position of BitPersona's image to be reversed.</div>
        <br />
        <div>
            <BitPersona Reversed
                        PrimaryText="Annie Lindqvist"
                        SecondaryText="Software Engineer"
                        Presence="BitPersonaPresence.Online"
                        PresenceIcons="_icons"
                        Size="BitPersonaSize.Size120"
                        ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
        </div>
    </DemoExample>


    <DemoExample Title="Templates" RazorCode="@example9RazorCode" Id="example9">
        <div>Text templates:</div><br />
        <div>
            <BitPersona Size="BitPersonaSize.Size100" ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" OnImageClick="() => {}">
                <PrimaryTextTemplate>
                    <BitIcon IconName="@BitIconName.Contact" Class="custom-ico" />
                    Annie Lindqvist
                </PrimaryTextTemplate>
                <SecondaryTextTemplate>
                    <BitIcon IconName="@BitIconName.Suitcase" Class="custom-ico" />
                    Software Engineer
                </SecondaryTextTemplate>
                <TertiaryTextTemplate>
                    <BitIcon IconName="@BitIconName.JoinOnlineMeeting" Class="custom-ico" />
                    In a meeting
                </TertiaryTextTemplate>
                <OptionalTextTemplate>
                    <BitIcon IconName="@BitIconName.Clock" Class="custom-ico" />
                    Available at 7:00pm
                </OptionalTextTemplate>
                <ImageOverlayTemplate>
                    <BitIcon IconName="@BitIconName.Edit" Class="custom-ico" />
                    Edit image
                </ImageOverlayTemplate>
            </BitPersona>
        </div>
        <br /><br /><br /><br />
        <div>Coin template:</div><br />
        <div>
            <BitPersona Size="BitPersonaSize.Size100" PrimaryText="Annie Lindqvist" SecondaryText="Software Engineer" Presence="BitPersonaPresence.Online" CoinVariant="BitVariant.Text">
                <CoinTemplate>
                    <img src="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" width="100px" height="100px" class="custom-coin" />
                </CoinTemplate>
            </BitPersona>
        </div>
    </DemoExample>

    <DemoExample Title="Color" RazorCode="@example10RazorCode" Id="example10">
        <BitPersona PrimaryText="Primary" CoinColor="BitColor.Primary" />
        <br /><br />
        <BitPersona PrimaryText="Secondary" CoinColor="BitColor.Secondary" />
        <br /><br />
        <BitPersona PrimaryText="Tertiary" CoinColor="BitColor.Tertiary" />
        <br /><br />
        <BitPersona PrimaryText="Info" SecondaryText="(default)" CoinColor="BitColor.Info" />
        <br /><br />
        <BitPersona PrimaryText="Success" CoinColor="BitColor.Success" />
        <br /><br />
        <BitPersona PrimaryText="Warning" CoinColor="BitColor.Warning" />
        <br /><br />
        <BitPersona PrimaryText="SevereWarning" CoinColor="BitColor.SevereWarning" />
        <br /><br />
        <BitPersona PrimaryText="Error" CoinColor="BitColor.Error" />
        <br /><br />
        <div style="background:var(--bit-clr-fg-ter);padding:1rem;margin: 1rem 0;">
            <div class="box">
                <BitPersona PrimaryText="PrimaryBackground" CoinColor="BitColor.PrimaryBackground" />
                <br /><br />
                <BitPersona PrimaryText="SecondaryBackground" CoinColor="BitColor.SecondaryBackground" />
                <br /><br />
                <BitPersona PrimaryText="TertiaryBackground" CoinColor="BitColor.TertiaryBackground" />
            </div>
        </div>

        <br /><br />
        <BitPersona PrimaryText="PrimaryForeground" CoinColor="BitColor.PrimaryForeground" />
        <br /><br />
        <BitPersona PrimaryText="SecondaryForeground" CoinColor="BitColor.SecondaryForeground" />
        <br /><br />
        <BitPersona PrimaryText="TertiaryForeground" CoinColor="BitColor.TertiaryForeground" />
        <br /><br />
        <BitPersona PrimaryText="PrimaryBorder" CoinColor="BitColor.PrimaryBorder" />
        <br /><br />
        <BitPersona PrimaryText="SecondaryBorder" CoinColor="BitColor.SecondaryBorder" />
        <br /><br />
        <BitPersona PrimaryText="TertiaryBorder" CoinColor="BitColor.TertiaryBorder" />
    </DemoExample>

    <DemoExample Title="Style & Class" RazorCode="@example11RazorCode" Id="example11">
        <div>Component's Style & Class:</div><br />
        <BitPersona PrimaryText="Saleh Khafan"
                    Size="BitPersonaSize.Size72"
                    Style="padding: 1rem; background: gray;border-radius: 1rem;" />
        <br /><br />
        <BitPersona PrimaryText="Saleh Khafan"
                    Size="BitPersonaSize.Size72"
                    Class="custom-class" />
        <br /><br /><br /><br />
        <div><b>Styles</b> & <b>Classes</b>:</div><br />
        <BitPersona PrimaryText="Saleh Khafan"
                    Size="BitPersonaSize.Size72"
                    Styles="@(new() { ImageContainer = "color: #b6ff00; background-color: #00ff90;",
                                              PrimaryTextContainer = "color: #ea1919; font-weight: bold; font-style: italic;" })" />
        <br /><br />
        <BitPersona PrimaryText="Saleh Khafan"
                    Size="BitPersonaSize.Size72"
                    Classes="@(new() { ImageContainer = "custom-img-container",
                                               PrimaryTextContainer = "custom-primary-text" })" />
    </DemoExample>

    <DemoExample Title="RTL" RazorCode="@example12RazorCode" Id="example12">
        <div dir="rtl">
            <BitPersona Dir="BitDir.Rtl"
                        PrimaryText="صالح یوسف نژاد"
                        SecondaryText="مهندس نرم افزار"
                        Size="@BitPersonaSize.Size56" />
        </div>
    </DemoExample>
</DemoPage>